<template>
	<svg :class="svgClass" aria-hidden="true" @click="$emit('click')">
		<use :xlink:href="icoName"></use>
	</svg>
</template>

<script>
	import {ref,computed} from '@vue/composition-api'
	export default {
		name:'svgIcon',
		// props:['iconClass','className'],
		props:{
			iconClass:{
				type:String,
				default:'',
				required:true,
				// 校验
				// validator:(value)=>{
				// // 处理
				// 	return ''
				// }
			},
			className:{
				type:String,
				default:''
			}
		},
		setup(props){
			const {iconClass,className} = props 
			
			const icoName = computed(()=>`#icon-${iconClass}`)
			const svgClass = computed(()=>{
				if(className){
					return `svg-icon ${className}`
				}else {
					return `svg-icon`
				}
			})
			return {
				icoName,
				svgClass
			}
		}
	}
</script>

<style lang='scss' scoped>
	.svg-icon {
		/* 和字体一样大小 */
		width: 1em;       
		height: 1em;
		/* svg很特别的样式--改变颜色需要这个 */
		fill:currentColor;
		/* 先定义样式 后面className可以直接传类名  */
/* 		&.font12 {
		  font-size: 12px;
		}
		&.font50 {
			font-size: 50px;
		} */
	}
</style>
